<template>
    <div class="jd-cart">
        <JdHeader title="购物车" back></JdHeader>

        <div class="top">
            <van-radio :checked="selectAll" class="select-item" name="1">全选</van-radio>
        </div>

        <ul class="cart">
            <li v-for="item in cartList" :key="item.proid">
                <van-radio @click="updateStatus(item.cartid, !item.flag)" :checked="item.flag" class="select-item"
                    name="1"></van-radio>
                <van-card class="goods-item" :price="item.originprice" desc="描述信息" :title="item.proname"
                    :thumb="item.img1">
                    <template #tags>
                        <van-tag plain type="primary">-</van-tag>
                        <input type="text" class="num-inp" :value="item.num">
                        <van-tag plain type="primary">+</van-tag>
                    </template>
                    <template #footer>
                        <van-button size="mini">按钮</van-button>
                        <van-button size="mini">按钮</van-button>
                    </template>
                </van-card>
            </li>
        </ul>
        <div class="bottom">
            总价:{{ totalPrice.toFixed(2) }}
        </div>

        <hr>
        <hr>
        {{ goodsList }}

        <!-- 底部内容 -->
        <Teleport to="#jd-footer">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" />
                <van-action-bar-icon @click="$router.push('/order')" icon="cart-o" text="查看订单" />
                <van-action-bar-icon icon="shop-o" text="店铺" />
                <van-action-bar-button @click="addOrderHandler" type="danger" text="生成订单" />
            </van-action-bar>
        </Teleport>
    </div>
</template>

<script setup lang="ts">
// 验证登录
import { onMounted, ref, computed } from 'vue'
import { Dialog } from 'vant';
import { useRouter, type Router } from 'vue-router';
import { getCartListAip, updateStatusApi } from '@/api/cart'
import { addOrderApi } from '@/api/order'

import { hotSearchApi } from '@/api/goods'
import type { MyCartItem, MyHotItem } from '@/config/interface'

const $router: Router = useRouter()

// 验证user_id
const token = window.localStorage.getItem('token')
const user_id = window.localStorage.getItem('user_id')
const testToken = () => {
    if (!token || !user_id) {
        Dialog({
            title: '提示',
            message: '您还没有登录'
        }).then(() => {
            $router.push({ path: '/login' })
        })
        return
    }
}

// 获取购物车列表
const cartList = ref<MyCartItem[]>([])
const getCartList = async () => {
    const res = await getCartListAip(user_id as string)
    cartList.value = res.data
    // console.log(res);
}

// 获取热门搜索相关
const goodsList = ref<MyHotItem[]>([])
const getGoodsList = async () => {
    const res = await hotSearchApi()
    console.log(res);
    goodsList.value = res.data
}

// 准备一个全选
const selectAll = computed(() => {
    return cartList.value.every(item => item.flag)
})

// 准备一个总价
const totalPrice = computed(() => {
    return cartList.value.reduce((prev, item) => {
        if (item.flag) {
            return prev + (item.originprice * item.num)
        } else {
            return prev
        }
    }, 0)
})

// 修改购物车选中状态
const updateStatus = async (id: string, flag: boolean) => {
    const res = await updateStatusApi(id, flag)
    console.log(res);
    if (res.code === '200') {
        getCartList()
    }
}

// 购物车全选状态

onMounted(() => {
    testToken()
    getCartList()
    getGoodsList()
})

// 生成订单
const addOrderHandler = async () => {
    const res = await addOrderApi(user_id as string)
    console.log(res);
    // 把订单信息存储在localStorage
    window.localStorage.setItem('time', ((res as unknown) as { time: string }).time)
}
</script>
<style scoped lang="scss">
.cart {
    li {
        display: flex;
        box-sizing: border-box;
        padding: 0 10px;

        .select-item {
            width: 25px;
        }

        .goods-item {
            flex: 1;
        }
    }
}

.num-inp {
    text-align: center;
    width: 25px;
    margin: 0 5px;
}

.van-action-bar {
    height: 40px;
}

.bottom {
    margin-bottom: 50px;
}
</style>